<!DOCTYPE html>
<html>

<head>
	<title>日志</title>
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-card">
			<div class="layui-card-body">
				<form id="searchbar" class="layui-form" onsubmit="javascript:return false;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input type="text" name="username" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">操作功能</label>
							<div class="layui-input-block">
								<input type="text" name="operation" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">时间范围</label>
							<div class="layui-input-inline" style="width: 300px;">
								<input type="text" class="layui-input" id="datetime" name="datetime">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">结果</label>
							<div class="layui-input-block">
								<select name="status" id="status">
									<option value="">全部</option>
									<option value="0">成功</option>
									<option value="1">失败</option>
									<option value="2">异常</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-primary" data-toggle="tableSearch"><i
									class="layui-icon layui-icon-search"></i></button>
						</div>
					</div>
				</form>
				<table id="tableLog" lay-filter="tableLog"></table>
				<script type="text/html" id="toolbar">
		  		<div class="layui-btn-container">
		    		<button class="layui-btn layui-btn-sm layui-bg-red  layui-hide" data-perm="log/clear"  onclick="clearData()"><i class="layui-icon layui-icon-fonts-clear"></i>清空</button>
		  		</div>
				</script>
				<script type="text/html" id="handbar">
		  		<a lay-event="custom" data-handle="view"><i class="layui-icon layui-icon-form icon-view"></i></a>
			</script>
			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
			<div class="layui-row">
				<div class="layui-col-md2 title">操作人</div>
				<div class="layui-col-md4 content">{{= d.username }}</div>
				<div class="layui-col-md2 title">IP地址</div>
				<div class="layui-col-md4 content">{{= d.ip }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">操作模块</div>
				<div class="layui-col-md4 content">{{= d.module }}</div>
				<div class="layui-col-md2 title">操作功能</div>
				<div class="layui-col-md4 content">{{= d.operation }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">操作时间</div>
				<div class="layui-col-md4 content">{{= d.createtime }}</div>
				<div class="layui-col-md2 title">请求耗时</div>
				<div class="layui-col-md4 content">{{= d.waste }}ms</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">请求方式</div>
				<div class="layui-col-md4 content">{{= d.style }}</div>
				<div class="layui-col-md2 title">请求状态</div>
				<div class="layui-col-md4 content">
					{{# if(d.status == '0'){ }}
						<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">成功</button>
					{{# } }}
					{{# if(d.status == '1'){ }}
						<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-orange">失败</button>
					{{# } }}
					{{# if(d.status == '2'){ }}
						<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-red">异常</button>
					{{# } }}
				</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">操作地址</div>
				<div class="layui-col-md10 content">{{= d.url }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">调用方法</div>
				<div class="layui-col-md10 content">{{= d.method }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">请求参数</div>
				<div class="layui-col-md10 content">{{= d.param }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">负载参数</div>
				<div class="layui-col-md10 content">{{= d.body }}</div>
			</div>
			<div class="layui-row">
				<div class="layui-col-md2 title">返回结果</div>
				<div class="layui-col-md10 content">{{= d.result }}</div>
			</div>
		</div>
	</script>
</body>

<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;
	var tableInst = null;
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};
	$(function () {
		var options = {
			elem: "#tableLog",
			layfilter: "tableLog",
			toolbar: '#toolbar',
			url: "log/search",
			where:{
				sort: 'createtime', //排序字段
				order: 'desc' //排序方式
			},
			before: changeParam,
			cols: [[
				{field: 'username', title: '用户名'}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				{field: 'module', title: '操作模块'},
				{field: 'operation', title: '操作功能'},
				{field: 'url', title: '请求路径'},
				{field: 'style', title: '请求方式'},
				{field: 'status', title: '结果', templet: statusFormatter},
				{field: 'createtime', title: '创建时间', align: 'center',sort:true},
				{fixed: 'right', title: '操作', templet: '#handbar', width: 150}
			]]
		};
		tableInst = content.initTable(options);

		layui.laydate.render({
			elem: '#datetime',
			type: 'datetime',
			range: true
		});

		form.render($("#status"))

		function statusFormatter(row) {
			switch (row.status) {
				case "0":
					return ' <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green">成功</button>';
				case "1":
					return ' <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-orange">失败</button>';
				case "2":
					return ' <button class="layui-btn layui-btn-primary layui-btn-sm layui-border-red">异常</button>';
				default:
					return "";
			}
		}

		function changeParam(options) {
			var params = options.where; 
			if (params.datetime  != null  && params.datetime != undefined) {
				var dtarr = params.datetime.split(' - ');
				params.startTime = dtarr[0];
				params.endTime = dtarr[1];
			}
		}
	})

	function view(row) {
		layui.laytpl(dialogHtml).render(row, function (str) {
			dialogData.dialogIndex = content.drawer('详情', ['600px', '100%'], str,'l');
			//dialogData.dialogIndex = content.dialog('详情', '800px', str);
		})

	}

	function clearData() {
		content.confirm("确认清空日志", function () {
			request.postAlert("log/clear",{}).then(res => {
				tableInst.reloadData();
			})
		})
	}

</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}

	.icon-view {
		font-size: 20px;
		color: #16b777;
		margin-right: 10px;
	}

	#dialogContent .title {
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		display: inline-block;
		background: #f7f7f7;
		border-top: 1px solid #e8e8e8;
		border-left: 1px solid #e8e8e8;
	}

	#dialogContent .content {
		height: 40px;
		line-height: 40px;
		padding: 0 3px 0 10px;
		border-top: 1px solid #e8e8e8;
		border-left: 1px solid #e8e8e8;
		border-right: 1px solid #e8e8e8;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
	}
</style>

</html>